<script setup>
import { LoadingBar } from '@varlet/ui'
import { Snackbar } from '@varlet/ui'
import api from '@/utils/api'
import { ref } from 'vue'
</script>

<script>
export default {
  data() {
    return {
      hotSearchValue: ref('douyin'),
      hotSearchList: ref([]),
      showChip: ref(false)
    }
  },
  methods: {
    // 获取情话
    getLoveMessage() {
      api
        .get('https://api.vvhan.com/api/text/love')
        .then((response) => {
          if (response.status === 200) {
            this.showChip = true
            this.loveMessage = response.data
          }
        })
        .catch((error) => console.log(error))
    },
    // 获取热搜榜
    getHotSearch() {
      LoadingBar.start() // 开始加载
      api
        .get('https://api.suxun.site/api/hotlist?id=' + this.hotSearchValue)
        .then((response) => {
          if (response.status === 200) {
            this.hotSearchList = response.data.data
            LoadingBar.finish() // 结束加载
          }
          LoadingBar.error() // 加载错误
        })
        .catch((error) => {
          console.log(error)
          Snackbar({
            type: 'error',
            content: '热搜榜请求失败，请稍后再试',
            duration: 1000
          })
          LoadingBar.error() // 加载错误
        })
    },
    // 打开新窗口
    openTabWeb(url) {
      window.open(url, '_blank')
    },
    // 刷新页面
    reload() {
      window.location.reload()
    }
  },
  created() {
    // 获取情话
    this.getLoveMessage()
    // 获取热搜榜
    this.getHotSearch()
  }
}
</script>

<template>
  <div id="home">
    <var-space direction="column" size="large">
      <var-chip>
        <span style="color: darkorchid">免费交友盲盒，左下角可搜寻，右下角可投放</span>
      </var-chip>
      <var-chip closeable v-if="showChip" @close="showChip = false" style="max-width: 100%">
        <var-ellipsis style="max-width: 260px">随机情话：{{ loveMessage }}</var-ellipsis>
      </var-chip>

      <iframe
        frameborder="no"
        marginwidth="0"
        marginheight="0"
        width="330"
        height="86"
        src="//music.163.com/outchain/player?type=2&id=1935263712&auto=1&height=66"
      ></iframe>

      <var-select
        placeholder="热搜榜【这里可查看各平台热搜】"
        v-model="hotSearchValue"
        variant="outlined"
        @change="getHotSearch"
      >
        <var-option label="抖音" value="douyin" />
        <var-option label="微博" value="weibo" />
        <var-option label="知乎" value="zhihu" />
        <var-option label="百度" value="baidu" />
        <var-option label="头条" value="toutiao" />
        <var-option label="掘金" value="juejin" />
      </var-select>

      <var-divider>
        <var-icon name="heart-outline" style="margin: 0 16px; color: var(--color-danger)" />
      </var-divider>

      <var-result type="error" title="错误" description="请求错误了哦~" v-if="!hotSearchList">
        <template #footer>
          <var-button type="danger" @click="reload()">刷新</var-button>
        </template>
      </var-result>

      <var-card
        v-else
        v-for="hotSearch in hotSearchList"
        :subtitle="hotSearch.desc ? hotSearch.desc : ''"
        :key="hotSearch.index"
        :title="hotSearch.title"
        :src="hotSearch.pic ? hotSearch.pic : ''"
        :elevation="5"
        @click="openTabWeb(hotSearch.mobileUrl)"
        ripple
      ></var-card>
    </var-space>
  </div>
</template>

<style>
#home {
  text-align: center;
}
.item {
  padding: 10px;
  border: 1px;
  border-radius: 5px;
}
</style>
